<template>
  <div>
    <el-card>
      <div>
        <p>房源管理</p>
        <div class="lk">
          <div v-for="(item,index) in tabData" :key="index" class="lb">
            <span
              @click="handleClick(item.id,index)"
              :key="index"
              :class="activeName == index ?'active' : '' "
            >{{item.text}}</span>
          </div>
        </div>
      </div>
      <div class="search-item">
        <!-- 遍历 如果类型一一对应 -->
        <div v-for="(item,index) in page" :key="index">
          <div v-if="item.type==='city'">
            <el-select
              v-model="searchData[item.value.province]"
              :placeholder="item.placeholder||'请输入内容'"
              class="ipt5"
              @change="changeProvince"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-select
              v-model="searchData[item.value.city]"
              :placeholder="item.placeholder||'请输入内容'"
              class="ipt5"
            >
              <el-option
                v-for="item in cityList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-select
              v-model="searchData[item.value.area]"
              :placeholder="item.placeholder||'请输入内容'"
              class="ipt5"
              @change="wer"
            >
              <el-option
                v-for="item in areaList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div v-for="(item,index) in page" :key="index+'-only'">
          <el-input
            v-if="item.type==='input'"
            v-model="searchData.value"
            :placeholder="item.placeholder||'请输入内容'"
            class="ipt5"
          ></el-input>
        </div>
        <div class="right">
          <button @click="search" class="ipt6">搜索</button>
        </div>
        <!-- <div class="search-type">
          
          <el-select v-model="searchData.status" placeholder="请选择">
           
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
        </div>-->
        <!-- <div class="search-po">
        <el-select v-model="searchData.status" placeholder="请选择">
           
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
        </el-select>-->
      </div>
      <!-- <div class="search-po">
        <el-select v-model="searchData.status" placeholder="请选择">
           
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </div>-->
      <!-- <div class="ipt">
   <el-input v-model="searchData.key" placeholder="关键字"></el-input>
      </div>-->

      <!-- </div>  -->

      <div class="nav">
        <el-table :data="tableData">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="小区名称" prop="housingName"></el-table-column>
          <el-table-column label="标题" prop="listingTitle"></el-table-column>
          <el-table-column label="面积" prop="houseArea"></el-table-column>
          <el-table-column label="总价" prop="sellingprice"></el-table-column>
          <el-table-column label="排序" prop="pv"></el-table-column>
          <el-table-column label="状态" prop="状态"></el-table-column>
          <el-table-column label="操作" prop="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>

              <el-dialog title="提示" :visible.sync="dialogVisible">
                <span>这是一段信息</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="total*1"
          :current-page.sync="obj.current"
          @current-change="changepage"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  page,
  firstCify,
  TwoCify,
  dele,
  searchlist,
  tuosearch
} from "../api/user.js";
export default {
  name: "index",
  props: {
    page: {
      type: Array,
      default: () => []
    }
    // obj: {
    //   type: Object,
    //   default: () => {}
    // }
  },
  data() {
    return {
      searchData: {
        // key:'',
        city: "",
        value: ""
      },

      obj: {
        classify: 1,
        size: 10,
        current: 1
      },
      // obj: {
      //   size: 10,
      //   current: 1,

      //这个得带""
      // },
      tableData: [],
      total: "", //total是数字,不能带""
      activeName: 0, //这个得带""
      getpage: 1,
      provinceList: [],
      areaList: [],
      cityList: [],
    
      dialogVisible: false,
      tabData: [
        { text: "新房", id: 1 },
        { text: "二手房", id: 2 },
        { text: "商铺", id: 3 },
        { text: "写字楼", id: 4 },
        { text: "找小区", id: 5 },
        { text: "租房", id: 6 }
      ]
    };
  },
  created() {
    this.getli();
   
  },
  methods: {
    getli() {
      firstCify({ level: 1 }).then(res => {
        
        this.provinceList = res.data;
      });
    },
    changeProvince(e) {
      TwoCify({ level: 2, code: e / 1000 }).then(res => {
        this.cityList = res.data;
      });
      // const o = JSON.stringify(e).slice(0,3)
      TwoCify({ level: 3, code: e / 1000 }).then(res => {
     
        this.areaList = res.data;
      });
    },
    search() {
      // 拿到searchData里面的值,找对地方
      searchlist({
        value: this.searchData.value,
        classify: this.obj.classify
      }).then(res => {
       
        this.tableData = res.data;
      });
    },
    // tab切换和分页公用一个页面
    handleClick(id, index) {
      console.log(id);
      this.obj.classify = id;
      this.activeName = index;

      this.getData();
    },
    getData() {
      page({
        //传入页数，当前页
        size: this.obj.size,
        current: this.obj.current,
        //字段
        classify: this.obj.classify
      }).then(res => {
     
        this.tableData = res.data;
        this.total = res.total;
      });
    },
    changepage(e) {
      this.getpage = e;

     
      //调用共同的数据
      this.getData();
    },
    handleDelete(data) {
      dele({ id: data.id }).then(res => {
       
        this.getData();
      });
    },
    bianji() {
      this.dialogVisible = true;
    },
    wer(e) {
      console.log(e);
      //省市区的接口
     tuosearch({code:e}).then(res=>{
         this.tableData=res.data
     })
    
      
    }
  }
};
</script>

<style lang="scss">
.search-item {
  display: flex;
}

.ipt6 {
  width: 100px;
  margin-left: 60px;
  margin-top: 20px;
  background: blue;
  color: #fff;
}

.lk {
  display: flex;
  justify-content: space-around;
}
.active {
  color: red;
}
</style>
